
import './common.less'
import '../pages/includes/nav/nav.less'
import '../pages/includes/top/top.less'
import '../pages/includes/footer/footer.less'
import request from '../utils/api';
import 'layuiSrc'

export const LOC_KEY = 'chj_loc';
export const SEARCH_TYPE = 'chj_search_type'
export const COMMON_URL = 'http://www.chehangjia.cn';

layui.use(['element', 'layer', 'form',], function () {
    // areaSelectEventInit();
    // searchEventInit();
    navEventInit();
    scSearchInit();
    console.log('%cCommon mudule loaded', 'font-size: 16px; color: #16a15f;')
    // console.log('haha')
})

// 区域选择
function areaSelectEventInit() {
    const hoverHook = document.querySelector('#area_hover_hook');
    const areaDrop = document.querySelector('#area_dorp_hook');
    const tags = document.querySelectorAll('.tag-hook');
    const areaValueHook = document.querySelector('#area_value_hook');
    // console.log(hoverHook)
    const areaText = sessionStorage.getItem(LOC_KEY + '_text');
    areaValueHook.innerHTML = areaText || '贵阳';
    hoverHook.addEventListener('mouseenter', function (params) {
        areaDrop.style.display = 'block';
        areaDrop.querySelector('.panel').style.width = this.offsetWidth + 'px';
    });

    hoverHook.addEventListener('mouseleave', function (params) {
        areaDrop.style.display = 'none';
    });

    for (let i = 0; i < tags.length; i++) {
        tags[i].onclick = function (e) {
            // console.log(this.dataset);
            const { value } = this.dataset;
            sessionStorage.setItem(LOC_KEY, value)
            sessionStorage.setItem(LOC_KEY + '_text', this.innerHTML)
            areaValueHook.innerHTML = this.innerHTML;

            areaDrop.style.display = 'none';
        }
    }
}

// 搜索
function searchEventInit() {
    const searchHook = document.querySelector('#search_input_hook');
    const typeHooks = document.querySelectorAll('.search_type_hook');
    const valueHook = document.querySelector('#type_value_hook');
    let shopSearchPath = ''
    let timer = null
    searchHook.oninput = function (e) {
        clearInterval(timer)
        timer = setTimeout(() => {
            request({
                url: 'http://www.chehangjia.cn/SE/get_down_list_ajax',
                method: 'post',
                params: {
                    str: e.target.value,
                    type: 3,
                    loc: getLoc()
                }
            })
                .then(res => {
                    if (res.info) {
                        let el = document.createElement('ul');
                        el.innerHTML = res.info.replace(/\'/g, '');
                        let child = el.firstElementChild || el.firstChild;
                        // console.log(el)
                        if (child && child.querySelector) shopSearchPath = child.querySelector('a').getAttribute('href');
                        // console.log(shopSearchPath)
                    }
                    
                    console.log(res)
                })
        }, 200);
    }

    let searchType = '1';
    for (let i = 0; i < typeHooks.length; i++ ) {
        typeHooks[i].onclick = function (e) {
            const { text, type } = this.dataset;
            searchHook.placeholder = text;
            searchHook.focus();
            valueHook.innerHTML = this.innerHTML;
            searchType = type;
            // sessionStorage.setItem(SEARCH_TYPE, type);
        }
    }
   
    const searchTagHooks = document.querySelectorAll('.search_tag_hook');
    for (let i = 0; i < searchTagHooks.length; i++) {
        searchTagHooks[i].onclick = function () {
            const loc = getLoc();
            location.href = `${COMMON_URL}/Jishou/${loc}/2/${this.innerHTML}`;
        }
    }

    const searchSubmitHook = document.querySelector('#search_submit_hook');
    // const searchForm = document.querySelector('#search_form');
    // console.log(searchSubmitHook)
    if (searchSubmitHook) searchSubmitHook.onclick = function () {
        const loc = getLoc();
        // const type = sessionStorage.getItem(SEARCH_TYPE);
        // console.log(searchType)
        switch (searchType) {
            case '2': 
                if (shopSearchPath) {
                    location.href = `${COMMON_URL}${shopSearchPath}&str=${searchHook.value}`; 
                } else {
                    location.href = `${COMMON_URL}/Jishou/${loc}?is_se=1&str=${searchHook.value}`; 
                }
                break;
            default:
                location.href = `${COMMON_URL}/Jishou/${loc}?is_se=1&str=${searchHook.value}`;
                break;
        }
    } 
}

// 导航
function navEventInit () {
    // let subNavs = document.querySelectorAll('.sub-nav');
    // for (let i = 0; i < subNavs.length; i++) {
    //     subNavs[i].onclick = function (e) {
    //         // console.log(111)
    //         e.stopPropagation();
    //     }
    // }
    let navHooks = document.querySelectorAll('.nav-hook');
    for (let i = 0; i < navHooks.length; i++) {
        navHooks[i].onclick = function (e) {
            let loc = getLoc();
            // return console.log(this.dataset)
            location.href = `${COMMON_URL}/${this.dataset.key}/${loc}`;
        }
    }
}

function getLoc() {
    return sessionStorage.getItem(LOC_KEY) || 'guiyang';
}

function scSearchInit() {
    let scTypeHooks = document.querySelectorAll('.sc-search-type-hook');
    let scValueHook = document.querySelector('#search_type_value_hook');
    let keywordsInput = document.querySelector('#keywords_hook');
    let path = scTypeHooks[0].dataset.path;
    for (let i = 0; i < scTypeHooks.length; i++) {
        scTypeHooks[i].onclick = function (e) {
            path = this.dataset.path;
            scValueHook.innerHTML = this.innerHTML;
            keywordsInput.placeholder = this.dataset.placeholder;
        }
    }

    let searchSubmit = document.querySelector('#search_submit');

    searchSubmit.onclick = function () {
        let keywords = keywordsInput.value;
        location.href = path + '?keywords=' + keywords;
        // console.log(keywords);
    }
}